473,422 Members | 2,224 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,422 software developers and data experts.

MooTools Accordion Sliding Incorrectly

162 100+
My issue is that I am using nested accordions and the second accordion in my nested list will not push the outer div down. The nested accordion slides beneath the main div container.

Another way to put it, if i load the page, then click on "Meeting 2" it accordions correctly. But when i click on "Task 2.1", that accordion for that section opens, but hides behind the containing div. Now if I then click "Meeting 1", everything opens fine, and then if i click "Meeting 2" again, the contents of "Task 2.1" show correctly in full.

Any Ideas? Thanks for the help.

Here is some code i think may be useful.

Moo 1.2 used with this addEvent javascript:
Expand|Select|Wrap|Line Numbers
  1. window.addEvent('domready', function() {
  2.     var meetingAccordion = new Accordion($$('.meeting_toggler'),$$('.meeting_element'),{
  3.  
  4.         opacity: false,
  5.         show : -1,
  6.  
  7.         onComplete:function(el){
  8.             if(el.getSize().y>0){
  9.                 el.setStyle('height','auto');
  10.             }
  11.         },
  12.  
  13.         onBackground:function(toggler,el){
  14.             el.setStyle('height',el.getSize().y);
  15.         }
  16.  
  17.     });
  18.     var taskAccordion = new Accordion($$('.task_toggler'),$$('.task_element'),{
  19.  
  20.         opacity: false,
  21.         show : -1,
  22.  
  23.         onComplete:function(el){
  24.             if(el.getSize().y>0){
  25.                 el.setStyle('height','auto');
  26.             }
  27.         },
  28.  
  29.         onBackground:function(toggler,el){
  30.             el.setStyle('height',el.getSize().y);
  31.         }
  32.  
  33.     });
  34.  
  35. });
  36.  
html
Expand|Select|Wrap|Line Numbers
  1. <div style="border:1px solid green">
  2.  
  3.     <div class="meeting_toggler">Meeting 1</div>
  4.  
  5.     <div class="meeting_element">
  6.  
  7.         <div class="task_toggler">Task 1.1</div>
  8.  
  9.         <div class="task_element">
  10.             Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilit de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.
  11.         </div>
  12.  
  13.         <div class="task_toggler">Task 1.2</div>
  14.  
  15.         <div class="task_element">
  16.             Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilit de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.
  17.         </div>
  18.  
  19.     </div>
  20.  
  21.     <div class="meeting_toggler">Meeting 2</div>
  22.  
  23.     <div class="meeting_element">
  24.  
  25.         <div class="task_toggler">Task 2.1</div>
  26.  
  27.         <div class="task_element">
  28.             Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilit de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.
  29.         </div>
  30.  
  31.         <div class="task_toggler">Task 2.2</div>
  32.  
  33.         <div class="task_element">
  34.             Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilit de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.
  35.         </div>
  36.  
  37.     </div>
  38.  
  39. </div>
  40.  
Oct 26 '08 #1
3 1891
acoder
16,027 Expert Mod 8TB
You may find this tutorial useful.
Oct 27 '08 #2
empiresolutions
162 100+
@acoder - thanks much for the suggested link
Nov 4 '08 #3
acoder
16,027 Expert Mod 8TB
You're welcome :)
Nov 4 '08 #4

Sign in to post your reply or Sign up for a free account.

Similar topics

0
by: axxon | last post by:
hi, I am having a huge problem here! the scenario is i am trying to create dynamic accordion Panes to a accordion control inside a tab panel in a content page. It works just fine in a regular...
1
techtherapy
by: techtherapy | last post by:
Hi guys and gals, This is a mootools js question, for any of those familiar with it. I'm using the accordion on this page: http://admire.previsuals.com/productions/index.php/resources.php ...
2
by: LayneMitch via WebmasterKB.com | last post by:
Greetings. I'm reading this book that is teaching me the more appropriate way of assigning functions. It has an 'accordian' example that when you click on a link, it expands into other options...
4
by: ameshkin | last post by:
Hi Everybody, I'm just now learning javascript and I'm using mootools. What I want to do is to dynamically load a php page into accordian panel 2, depending on which radio button is selected in...
8
by: Tomasz J | last post by:
Hello developers, After migrating my web project application (using the old model) to .Net Framework 3.5 and Ajax Control Toolkit release 20820 the Accordion control no longer works correctly....
6
by: Andy B | last post by:
I am trying to use an accordion control from the ajax control toolkit for ..net3.5 sp1. When I put a link in one of the accordion pannel headerTemplates to open and close the content, I always get...
8
by: quipo | last post by:
Hi, im using an accordion script but it doesnt work if i use it with ajax. example: <div id="accordion"> <dl class="accordion" id="slider"> <dt>click here for the 1st pane</dt> ...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
1
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.